<template>
  <div class="sidebar-item-container" v-if="!item.meta || !item.meta.hidden">
    <!--  只有一个子路由时-->
    <template v-if="isRenderSingleRoute && theOnlyOneChildRoute">
      <sidebar-item-link
        v-if="theOnlyOneChildRoute.meta"
        :to="resolvePath(theOnlyOneChildRoute.path)"
      >
        <el-menu-item :index="resolvePath(theOnlyOneChildRoute.path)">
          <i v-if="icon && icon.includes('el-icon')" :class="icon"></i>
          <svg-icon class="menu-icon" :icon-class="icon" v-if="icon"></svg-icon>
          <template #title>
            <span>{{ theOnlyOneChildRoute.meta.title }}</span>
          </template>
        </el-menu-item>
      </sidebar-item-link>
    </template>

    <!--  多个子路由-->
    <el-submenu v-else :index="resolvePath(item.path)" popper-append-to-body>
      <template #title>
        <i v-if="icon && icon.includes('el-icon')" :class="icon"></i>
        <svg-icon
          v-if="item.meta.icon"
          class="menu-icon"
          :icon-class="item.meta.icon"
        ></svg-icon>
        <span class="submenu-title">{{ item.meta.title }}</span>
      </template>
      <sidebar-item
        v-for="child in item.children"
        :key="child.path"
        :is-nest="true"
        :item="child"
        :base-path="resolvePath(child.path)"
      >
      </sidebar-item>
    </el-submenu>
  </div>
</template>

<script lang="ts">
import path from 'path'
import { defineComponent, PropType, computed, toRefs } from 'vue'
import SidebarItemLink from './SidebarItemLink.vue'
import { MenuItemRouter } from '@/router/type'
import { isExternal } from '@/utils/validate'

export default defineComponent({
  name: 'SidebarItem',
  components: {
    SidebarItemLink
  },
  props: {
    // 当前路由
    item: {
      type: Object as PropType<MenuItemRouter>,
      required: true
    },
    // 父路由路径
    basePath: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const { item } = toRefs(props)

    // 子路由数量
    const showingChildNumber = computed(() => {
      const children = (props.item.children || []).filter((child) => {
        if (child.meta && child.meta.hidden) {
          return false
        }
        return true
      })
      return children.length
    })

    // 要渲染的单个路由
    const theOnlyOneChildRoute = computed(() => {
      if (showingChildNumber.value > 1) {
        return null
      }
      if (item.value.children) {
        for (const child of item.value.children) {
          // hidden: 表示不渲染为菜单(404,login)
          if (!child.meta || !child.meta.hidden) {
            return child
          }
        }
      }
      return {
        ...props.item,
        path: ''
      }
    })

    const icon = computed(() => {
      return (theOnlyOneChildRoute.value?.meta?.icon ||
        (props.item.meta && props.item.meta.icon)) as string
    })

    const resolvePath = (childPath: string) => {
      if (isExternal(childPath)) {
        return childPath
      }
      return path.resolve(props.basePath, childPath)
    }

    // 设置 alwaysShow: true，这样它就会忽略上面定义的规则，一直显示根路由 哪怕只有一个子路由也会显示为嵌套的路由菜单
    const alwaysShowRootMenu = computed(
      () => props.item.meta && props.item.meta.alwaysShow
    )

    // 是否有可渲染子路由
    const noShowingChildren = computed(() => showingChildNumber.value === 0)

    // 是否只有一条可渲染路由
    const isRenderSingleRoute = computed(
      () =>
        !alwaysShowRootMenu.value &&
        (!theOnlyOneChildRoute.value?.children || noShowingChildren.value)
    )

    return {
      theOnlyOneChildRoute,
      icon,
      resolvePath,
      isRenderSingleRoute
    }
  }
})
</script>

<style lang="scss">
.sidebar-item-container {
  .menu-icon {
    margin-right: 16px;
    margin-left: 5px;
    vertical-align: middle;
  }
  .el-menu-item {
    text-align: left;
  }
  .el-submenu {
    .el-submenu__title {
      text-align: left;
    }
  }
}
</style>
